<template>
  <div>
    <ToolBar>
      <div>
        <el-button type="primary" size="small" @click="showEditDialog = true">添加商品种类</el-button>
        <!-- <el-button type="primary" size="small" @click="exportTable">本地导出表格</el-button> -->
      </div>
      <!-- <div>
        <el-input placeholder="请输入商品名" size="small" style="width: 140px" v-model="searchParams.title" clearable>
        </el-input>
        <el-select v-model="searchParams.type" clearable style="width: 140px" placeholder="请选择商品类型" size="small">
          <el-option v-for="item in goodsTypeData" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
        <el-button type="success" size="small" @click="refresh()">查询</el-button>
        <el-button type="warning" size="small" @click="clearSearchParams()">重置</el-button>
      </div> -->
    </ToolBar>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="id" label="种类id"></el-table-column>
      <el-table-column prop="name" label="种类名字"></el-table-column>
      <el-table-column prop label="图片">
        <template slot-scope="s">
          <el-image style="width: 100px; height: 100px" :src="imageApi + s.row.imgUrl"></el-image>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="240">
        <div slot-scope="s">
          <!-- <el-tooltip :content="stateValue" placement="top">
            <el-switch
              v-model="stateValue"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-value="2"
              inactive-value="1"
              @change="updateState(s.row.id)"
            ></el-switch>
          </el-tooltip>-->
          <el-button type="primary" size="small" @click="editItem(s.row.id)">编辑</el-button>
          <el-button type="danger" size="small" @click="del(s.row.id)">删除</el-button>

        </div>
      </el-table-column>
    </el-table>
    <el-pagination background :page-size="pageSize" layout="prev, pager, next" :total="total"
      @current-change="changePage"></el-pagination>
    <!--    <Pagination-->
    <!--      :params="searchParams"-->
    <!--      :requestFunc="requestFunc"-->
    <!--      ref="pagination"-->
    <!--      @returnData="returnData"-->
    <!--    />-->
    <Edit :showEditDialog="showEditDialog" @close="showEditDialog = false" @success="refresh()" />
  </div>
</template>
<!-- sss -->
<script>
import { getProductsCategory } from "@/api/goodsManage/list";
import { exportCvsTable } from "@/utils/cvs";
import { resetObject } from "@/utils/common";
import { serverApiUrl } from "@/config/apiUrl";
import { todelCategory } from "@/api/goodsManage/list";
import Edit from "./Edit.vue";
export default {
  data() {
    return {
      serverImageUrl: serverApiUrl, //可以从后端得到
      imageApi: serverApiUrl,
      // pageSize: 5, //每页显示5条
      // total: 0, //总条数
      // pageNo: 1, //默认当前页码第1页
      // searchParams: {
      //   title: "",
      //   type: ""
      // },
      showEditDialog: false,
      tableData: [],
      // goodsTypeData: [],
      id: null,
      stateValue: 1
    };
  },
  created() {
    this.initData(); //页面加载就初始化商品数据，默认选第一页的数据
  },
  methods: {
    // changePage(val) {
    //   //val:改变页码当前的页码
    //   this.pageNo = val;
    //   this.initData(); //根据新的页码选取分页数据
    // },
    initData() {
      // goodsTypeList()
      //   .then(r => {
      //     //获取商品类型列表
      //     this.goodsTypeData = r;
      //   })
      //   .catch(() => { });
      getProductsCategory({
        //获取商品列表
        // pageNo: this.pageNo,
        // pageSize: this.pageSize,
        // name: this.searchParams.title,
        // categoryId: this.searchParams.type
      })
        .then(r => {
          this.tableData = r;
          console.log(this.tableData);
          // this.total = r.total;
        })
        .catch(() => { });

    },
    editItem(id) {
      this.id = id;
      this.showEditDialog = true;
    },
        //导出表格

    // exportTable() {
    //   exportCvsTable(
    //     [
    //       { title: "文章标题", field: "title" },
    //       { title: "浏览量", field: "visit_count" }
    //     ],
    //     this.tableData,
    //     "文章列表"
    //   );
    // },
    refresh() {
      this.initData();
    },
    returnData(pageList) {
      this.tableData = pageList.list;
    },
    clearSearchParams() {
      resetObject(this.searchParams);
      this.refresh();
    },
    del(id) {
      this.$confirm("确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          todelCategory({ "id": id });
          location.reload();
        })
        .catch(() => { });
    },
    // updateStateApi(id, newstate) {
    //   console.log(id, newstate);

    //   // row.d = 0;
    //   // updateStatus({ id: row.id})
    //   //   .then(r => {
    //   //     this.$message({
    //   //       type: "success",
    //   //       message: "操作成功!"
    //   //     });
    //   //     this.refresh();
    //   //   })
    //   //   .catch(() => {});
    // }
  },

  components: { Edit }
};
</script>
